<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="../ext-core.js"></script>
<script src="../$.js"></script>
<script src="../ext/Component.js"></script>
<script src="../ext/Box.js"></script>
<script src="../ext/dd/Drag.js"></script>
<script src="../ext/dd/DragProxy.js"></script>
<script src="../ext/dd/Drop.js"></script>
<script src="../ext/dd/Manager.js"></script>

<style>
.x-drag-proxy{
	background:red !important;
	visibility:hidden;
	z-index:10000;
}
.el{
	background:red !important;
	margin:5px;
	width:100px; 
	height:100px;
	float:left;
}
</style>

<script>
$.onReady(function(){
	var box = new $.Box('box1', {
		width: 100
		,height: 100
		,autoRender: true
	});
	
	/*box.getEl().on('click', function(){
		box.setXY([400, 400], true);	
	});*/
	
	var dragProxy = new $.dd.DragProxy(box.getEl(), {
		data: {a: 1}
		//,offsetMouseX: 100
	});
	
	dragProxy.on('beforestart', function(drag){
		drag.el.setStyle({cursor: 'move'});	
	});
	dragProxy.on('drop', function(drag, e, data){
		
	});
	
	var drop = new $.dd.Drop('drop1');
});
</script>
</head>

<body>

<div id="box1" style="background:#ccc"></div>

<div id="drop1" style="width:400px; height:400px; background:#ccc; margin:10px;"></div>

</body>
</html>
